<template>
  <div class="header-layout">
    <div class="header-bg" :class="{ is_home: isHome }">
      <home-header class="nav-header"></home-header>
    </div>
    <div class="layout-content" :class="{ is_home_con: isHome }">
      <Empty v-if="isFirstLogin"></Empty>
      <keep-alive :include="cachedPages" v-if="!isFirstLogin">
        <router-view />
      </keep-alive>
    </div>
    <!-- 新手指导 -->
    <guide v-if="showGuide && !isHome"></guide>
    <!-- <guide></guide> -->
    <!-- 体验账号到期提示 -->
  </div>
</template>

<script>
import Empty from './components/Empty.vue'
import HomeHeader from './components/HomeHeader.vue'
import { mapGetters } from 'vuex'
import Guide from './components/Guide'
import { logout } from '@api/modules/user.js'

export default {
  name: 'LayoutMain',
  components: { HomeHeader, Guide, Empty },
  props: {},
  data() {
    return {
      showVip: false,
      vipTitle: '',
      expiredTime: '',
    }
  },
  computed: {
    ...mapGetters(['cachedPages', 'loginCount']),
    ...mapGetters('role', ['isAdminRole']),
    showGuide() {
      // return this.isMainRole && this.loginCount < 2 && !this.showVip
      return this.isAdminRole && localStorage.isShowGuide && this.loginCount < 2
    },
    isFirstLogin() {
      return false
      // return localStorage.pskh_userId && this.loginCount < 2
    },
    isHome() {
      return this.$route.name === 'homePage'
    },
  },
  created() {},
  methods: {
    logoutSuccess() {
      localStorage.removeItem('token')
      localStorage.clear()
      sessionStorage.clear()
      this.$store.commit('clearCommonAll')
      this.$router.replace('/login')
    },
    onLogout() {
      this.$confirm('确定退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {
        logout().then(res => {
          if (res.status === 200) {
            this.$message.success('退出成功！')
            this.logoutSuccess()
          }
        })
      })
    },
    onClose() {
      this.showVip = false
    },
  },
}
</script>

<style lang="scss" scoped>
.header-layout {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .header-bg {
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
    height: 72px;
  }
  .nav-header {
    width: 100%;
    background-image: url('../assets/images/home/header.png');
    height: 72px;
    box-shadow: none;
  }
  .is_home {
    background-image: url('../assets/images/home/home-header.png');
    height: 209px;
    .nav-header {
      background-color: transparent;
    }
  }
  .layout-content {
    padding-top: 72px;
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
  }
  .is_home_con {
    background: #ececec;
  }
}
</style>
